<template>
	<view class="profile-page">
		<!-- 用户信息卡片 -->
		<view class="user-card card">
			<view class="user-info">
				<image class="user-avatar avatar-lg" :src="userAvatar"></image>
				<view class="user-details">
					<view class="user-name">{{ userName }}</view>
					<view class="user-subtitle">智能咨询用户</view>
				</view>
			</view>
			<view class="user-stats">
				<view class="stat-item">
					<view class="stat-number">{{ consultationCount }}</view>
					<view class="stat-label">咨询次数</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ totalMessages }}</view>
					<view class="stat-label">消息总数</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="goToConsultationHistory">
				<view class="menu-icon history-icon">
					<text class="iconfont icon-huihua"></text>
				</view>
				<view class="menu-content">
					<view class="menu-title">咨询历史</view>
					<view class="menu-subtitle">查看所有咨询记录</view>
				</view>
				<view class="menu-arrow">
					<text class="iconfont icon-left" style="transform: rotate(180deg);"></text>
				</view>
			</view>

			<view class="menu-item" @click="showSettings">
				<view class="menu-icon settings-icon">
					<text class="iconfont icon-xiugai"></text>
				</view>
				<view class="menu-content">
					<view class="menu-title">设置</view>
					<view class="menu-subtitle">个人设置和偏好</view>
				</view>
				<view class="menu-arrow">
					<text class="iconfont icon-left" style="transform: rotate(180deg);"></text>
				</view>
			</view>

			<view class="menu-item" @click="showAbout">
				<view class="menu-icon about-icon">
					<text class="iconfont icon-kefu"></text>
				</view>
				<view class="menu-content">
					<view class="menu-title">关于我们</view>
					<view class="menu-subtitle">了解伊言一语</view>
				</view>
				<view class="menu-arrow">
					<text class="iconfont icon-left" style="transform: rotate(180deg);"></text>
				</view>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout-section">
			<view class="logout-btn" @click="logout">
				<text class="logout-text">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		userName() {
			const user = this.$store.state.sender;
			return (user && (user.name || user.Name)) || '用户';
		},
		userAvatar() {
			const user = this.$store.state.sender;
			const avatar = (user && (user.avatar || user.Avatar)) || '/static/img/user_avatar.png';
			return avatar;
		},
		consultationCount() {
			return this.$store.state.consultation.list.length;
		},
		totalMessages() {
			// 计算所有咨询的消息总数
			const messagesMap = this.$store.state.consultation.messagesMap;
			return Object.values(messagesMap).reduce((total, messages) => {
				return total + (messages ? messages.length : 0);
			}, 0);
		}
	},
	methods: {
		// 跳转到咨询历史
		goToConsultationHistory() {
			uni.switchTab({
				url: '/pages/consultation/consultation'
			});
		},

		// 显示设置
		showSettings() {
			uni.showModal({
				title: '设置',
				content: '设置功能正在开发中，敬请期待',
				showCancel: false
			});
		},

		// 显示关于我们
		showAbout() {
			uni.showModal({
				title: '关于伊言一语',
				content: '伊言一语是一款基于AI技术的心理咨询应用，为用户提供专业、便捷的心理健康服务。\n\n版本：1.0.0\n客服邮箱：chen.mo.shi.yin@163.com',
				showCancel: false
			});
		},

		// 退出登录
		logout() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出登录吗？',
				confirmColor: '#ff4757',
				success: async (res) => {
					if (res.confirm) {
						try {
							await this.$store.dispatch('logout');
							uni.reLaunch({
								url: '/pages/index/index'
							});
						} catch (error) {
							console.error('退出登录失败:', error);
							uni.showToast({
								title: '退出失败，请重试',
								icon: 'none'
							});
						}
					}
				}
			});
		}
	}
}
</script>

<style scoped lang="scss">
.profile-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx;
}

.user-card {
	padding: 40rpx;
	margin-bottom: 30rpx;
	position: relative;
	overflow: hidden;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
		z-index: 1;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		position: relative;
		z-index: 2;
		
		.user-avatar {
			margin-right: 30rpx;
			border: 4rpx solid rgba(102, 126, 234, 0.2);
			box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.15);
		}
		
		.user-details {
			flex: 1;
			
			.user-name {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 10rpx;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}
			
			.user-subtitle {
				font-size: 28rpx;
				color: #666;
				position: relative;
				
				&::before {
					content: '✨';
					margin-right: 8rpx;
				}
			}
		}
	}
	
	.user-stats {
		display: flex;
		justify-content: space-around;
		padding-top: 30rpx;
		border-top: 1rpx solid rgba(240, 240, 240, 0.8);
		position: relative;
		z-index: 2;
		
		.stat-item {
			text-align: center;
			transition: transform 0.3s ease;
			
			&:hover {
				transform: translateY(-5rpx);
			}
			
			.stat-number {
				font-size: 48rpx;
				font-weight: 600;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				margin-bottom: 10rpx;
			}
			
			.stat-label {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
}

.menu-section {
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	margin-bottom: 30rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	transition: all 0.3s ease;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background: #f8f9fa;
		transform: scale(0.98);
	}
	
	.menu-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		position: relative;
		overflow: hidden;
		
		.iconfont {
			font-size: 36rpx;
			color: white;
			z-index: 2;
			position: relative;
		}
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 20rpx;
			z-index: 1;
		}
		
		// 咨询历史图标 - 聊天气泡风格
		&.history-icon {
			background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
			
			&::before {
				background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 50%);
			}
		}
		
		// 设置图标 - 齿轮机械风格
		&.settings-icon {
			background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
			
			&::before {
				background: conic-gradient(from 45deg, rgba(255,255,255,0.2) 0deg, transparent 90deg, rgba(255,255,255,0.2) 180deg, transparent 270deg);
			}
		}
		
		// 关于我们图标 - 客服温暖风格
		&.about-icon {
			background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
			
			&::before {
				background: linear-gradient(45deg, rgba(255,255,255,0.4) 0%, transparent 50%, rgba(255,255,255,0.2) 100%);
			}
		}
	}
	
	.menu-content {
		flex: 1;
		
		.menu-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.menu-subtitle {
			font-size: 26rpx;
			color: #999;
		}
	}
	
	.menu-arrow {
		.iconfont {
			font-size: 28rpx;
			color: #ccc;
			transition: transform 0.3s ease;
		}
	}
	
	&:hover .menu-arrow .iconfont {
		transform: rotate(180deg) translateX(5rpx);
	}
}

.logout-section {
	padding: 0 20rpx;
	
	.logout-btn {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		text-align: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		
		&:active {
			background: #f8f9fa;
		}
		
		.logout-text {
			font-size: 32rpx;
			color: #ff4757;
			font-weight: 500;
		}
	}
}
</style>